<template>
  <div class="maskCenter">
    <div :class="windowShow?'systemDialog':'systemDialog-hide'">
      <div class="dialog-header" v-winmove>
        <span>提醒角色</span>
        <span class="iconfont iconbiaoqianlan-guanbi" @click="hideRole"></span>
      </div>
      <div class="dialog-body content">
        <div class="role-selection">
          <tree
            :type="1"
            :dialog="0"
            style="padding-top: 16px;"
            @addRole="addRole"
            :propsParam="{parentId: 0,type: 1}"
          ></tree>
        </div>
        <div class="detail">
          <el-table
            class="systemTable"
            :highlight-current-row="true"
            stripe
            :data="tableData"
            ref="multipleTable"
            height="calc(100%)"
            max-height="calc(100%)"
            size="medium"
            row-class-name="row"
            cell-class-name="column"
            style="width: 100%;"
            :fit="true"
          >
            <el-table-column
              min-width="80"
              v-for="(item, index) in tableLabel"
              :key="index"
              :prop="item.prop"
              :width="item.width"
              :label="item.label"
            ></el-table-column>
            <el-table-column label="操作" width="120">
              <template slot-scope="scope">
                <span class="systemButtonDelete" @click="deleteRow(scope.row)">删除</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import tree from "../components/organizationTree.vue";
import winmove from "@/directives/winmove";
import { roleSave, roleDelete, getRoleByNode } from "@/system/api/remind";
export default {
  name: "earlyWarning",
  components: {
    tree,
  },
  directives: {
    winmove,
  },
  data() {
    return {
      windowShow: true,
      // 表格数据
      tableData: [],
      // 表头数据
      tableLabel: [
        {
          label: "岗位名称",
          width: "",
          prop: "name",
        },
        {
          label: "岗位路径",
          width: "200",
          prop: "path",
        },
      ],
    };
  },
  props: ["remindId"],
  mounted: function () {
    this.getRolesList();
  },
  methods: {
    getRolesList() {
      getRoleByNode({
        lx: 1,
        remindId: this.remindId,
      }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.info;
        }
      });
    },
    hideRole() {
      this.windowShow = false;
      setTimeout(() => {
        this.$emit("hide");
      }, 400);
    },
    deleteRow(row) {
      let param = {
        roleId: row.id,
        remindId: this.remindId,
      };
      roleDelete(param).then((res) => {
        if (res.code == 200) {
          this.message(res.msg, 1);
          this.getRolesList();
        } else {
          this.message(res.msg, 2);
        }
      });
    },
    addRole(data) {
      if (!data.leaf) {
        this.message("该层角色不允许添加", 2);
      } else {
        let param = {
          roleId: data.id,
          remindId: this.remindId,
        };
        roleSave(param).then((res) => {
          if (res.code == 200) {
            this.message(res.msg, 1);
            this.getRolesList();
          } else {
            this.message(res.msg, 2);
          }
        });
      }
    },
  },
};
</script>

<style scoped>
.systemDialog {
  width: 800px;
  height: 600px;
}

.systemDialog-hide {
  width: 800px;
  height: 600px;
}

.content {
  display: flex;
  flex-direction: row;
}

.role-selection {
  background: var(--dialog-buttonBox-back-color);
  border: 1px solid var(--div-border-color);
  border-radius: 6px;
  width: 40%;
  height: 100%;
  overflow: auto;
}

.content /deep/ .content-wrapper .el-tree {
  background: var(--dialog-buttonBox-back-color) !important;
  width: 100%;
  border: none;
  padding-top: 0px;
}

.detail {
  width: 60%;
  background: var(--dialog-buttonBox-back-color);
  border: 1px solid var(--div-border-color);
  border-radius: 6px;
  margin-left: 12px;
}
</style>
